<template>
<div id="father">
  <el-table
      :data="tableData"
      border
      style="width: 100%" >
    <el-table-column
        fixed
        prop="empno"
        label="编号"
        >
    </el-table-column>
    <el-table-column
        prop="ename"
        label="姓名"
        >
    </el-table-column>
    <el-table-column
        prop="job"
        label="岗位"
        >
    </el-table-column>
    <el-table-column
        prop="sal"
        label="薪水"
    >
    </el-table-column>
    <el-table-column
        prop="dept.dname"
        label="部门"
    >
    </el-table-column>


    <el-table-column
        prop="mgr"
        label="领导编号"
        >
    </el-table-column>


    <el-table-column
        prop="hiredate"
        label="入职日期"
        >
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        >
      <template slot-scope="scope">
<!--        <el-button @click="delete(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>-->
        <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="small">
          移除
        </el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageCurrent"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "emp",
  data(){
    return {
      tableData:[],
      total:30,
      pageSize:5,
      pageCurrent:1
    }
  },
  created() {
    this.initEmpTable();
  },
  methods:{
    initEmpTable(){
      // alert("aaa")
      this.$ax.get("/emp/page/"+this.pageCurrent+"/"+this.pageSize).then(res=>{
        console.log(res)
        // alert(JSON.stringify(res.data.data.total))
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
      })
    },
    handleSizeChange(val) {
      // alert(JSON.stringify(val))
      this.pageSize=val;
      this.initEmpTable();
    },
    handleCurrentChange(val) {
      // alert(JSON.stringify(val))
      this.pageCurrent=val;
      this.initEmpTable();
    },
    deleteRow(a,b){
      let empno=b.empno;
      // alert(JSON.stringify(empno))
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$ax.delete(`/emp/del/` + empno).then(r => {
            // alert(JSON.stringify(r))
            this.initEmpTable();
            if (r.data.code == 200) {
              this.$message({
                type: 'success',
                message: r.data.msg
              });
              this.initEmpTable();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


    }
  }

}
</script>

<style scoped>
#father{
  background-color: aquamarine;

}
</style>